<template>
  <div class="container" :style="containerStyle">
    <navbar ref="navbar" :title="title" theme="light" @rightItemClick="navbarRightItemClick"
            :rightItemText="editMode ? '取消' : '编辑'"></navbar>
    <list ref="itemList"
          class="item-list-container"
          @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div style="margin-top: 12" ref="top"></div>
      </cell>
      <cell v-if="footmarkList.length" v-bind:key="rowIdx" v-for="(list, rowIdx) in footmarkRowList">
        <item-cell @footmarkClick="footmarkClick" @footmarkDel="footmarkDel"
                   :footmarkList="list" :showDelBtn="editMode"></item-cell>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" :icon="sorryIcon" v-if="!footmarkList.length && !hasNext"></page-notice>
      </cell>
      <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                         :shown="hasNext"></page-loading-more>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
    <wxc-loading :show="loadingShow"></wxc-loading>
    <div class="footer" v-if="editMode">
      <text class="btn btn-primary btn-large" @click="clearAll" style="flex: 1">清空</text>
    </div>
    <wxc-dialog title="温馨提示"
                content="确定要清空所有吗？"
                :show="dialogShow"
                :single="false"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
    </wxc-dialog>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/buttons";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
  }

  .item-list-container {

  }

  .shopcat-scrollbar {
    background-color: #ffffff;
  }

  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 20px;
    flex-direction: row;
  }

</style>
<script>

import {WxcDialog, WxcLoading} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let dom = weex.requireModule('dom')
let urlPath = require('./include/url-path')
let navigator = require('./include/xnavigator')

let grouping = require('./include/grouping')
let queryparser = require('./include/queryparser')
const DEFAULT_ITEM_SEARCH_PARAM = {
  page: 1,
  keywords: '',
  status: 'ONSALE',
  finished: false
}
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    'navbar': require('./components/navbar.vue'),
    WxcLoading,
    WxcDialog,
    'item-cell': require('./components/footmark-item-cell.vue')
  },
  props: {
    height: {default: 0},
    back: {default: true},
    recommend: {default: ''},
    title: {default: null}
  },
  data () {
    return {
      footmarkList: [],
      footmarkRowList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      hasNext: true,
      shopcatId: '',
      sorryIcon: 'images/aiya.png',
      searchParam: Object.assign({}, DEFAULT_ITEM_SEARCH_PARAM),
      showShopcatBar: true,
      backHidden: !this.back,
      containerStyle: {},
      searchbarShow: {default: true},
      loadingShow: false,
      editMode: false,
      dialogShow: false,
      type: 'HISTORY',
      title: '我的足迹'
    }
  },
  created () {
    let cfg = this.$getConfig()
    let param = queryparser(cfg.bundleUrl)
    if (param.type) {
      this.type = param.type
    }
    if (this.type === 'HISTORY') {
      this.title = '我的足迹'
    } else if (this.type === 'FAVOR') {
      this.title = '我的收藏'
    }
    DEFAULT_ITEM_SEARCH_PARAM.type = this.type
    this.searchParam = Object.assign({}, DEFAULT_ITEM_SEARCH_PARAM)
    this.sorryIcon = urlPath.assets(this.sorryIcon)
    Deferred.when(this.loadData(), this.searchItem()).always(() => {
    })
  },
  methods: {
    loadData () {
    },
    resetSearchParam () {
      Object.assign(this.searchParam, DEFAULT_ITEM_SEARCH_PARAM)
      this.hasNext = true
    },
    searchItem (append, callback) {
      // modal.alert({message: JSON.stringify(this.searchParam)})
      return api.footmark.search(this.searchParam).done((rs) => {
        if (append) {
          this.footmarkList = this.footmarkList.concat(rs.data.results)
        } else {
          this.footmarkList = rs.data.results
        }
        this.footmarkRowList = grouping(this.footmarkList, 2)
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        callback && callback()
      })
    },
    onXRefresh (event) {
      this.searchParam.page = 1
      this.onRefresh(event, Deferred.when(this.loadData(), this.searchItem().always(() => {
        dom.scrollToElement(this.$refs.top)
      })))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.searchItem(true, () => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      dom.scrollToElement(this.$refs.top)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    footmarkClick (footmark) {
      if (footmark.itemType === 'CommissionItem') {
        navigator.push('commission-item.js?id=' + footmark.itemId)
      } else if (footmark.itemType === 'SellerPromotionItem') {
        navigator.push('sp-item.js?id=' + footmark.itemId)
      }
    },
    navbarRightItemClick () {
      this.editMode = !this.editMode
    },
    footmarkDel (footmark) {
      this.loadingShow = true
      api.footmark.delByItemId({id: footmark.itemId}).always(() => {
        this.searchItem().always(() => {
          this.loadingShow = false
        })
      })
    },
    clearAll () {
      this.dialogShow = true
    },
    wxcDialogCancelBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.dialogShow = false
    },
    wxcDialogConfirmBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.dialogShow = false
      this.loadingShow = true
      this.editMode = false
      api.footmark.clear().always(() => {
        this.searchItem().always(() => {
          this.loadingShow = false
        })
      })
    }
  }
}
</script>
